<template>
  <view class="container">
    <!-- 顶部反馈按钮 -->
    <view class="feedback-header">
      <button class="feedback-btn" @tap="goToFeedbackForm">
        <view class="btn-line">
          <text class="btn-emoji">📝</text>
          <text class="btn-text">我要反馈</text>
        </view>
        <text class="btn-sub">点我提交问题与建议</text>
      </button>
    </view>
    
    <!-- 问题解决情况列表 -->
    <view class="feedback-list">
      <view class="list-header">
        <text class="list-title">问题解决情况</text>
      </view>
      
      <view class="feedback-item" v-for="(item, index) in feedbackList" :key="index">
        <view class="item-header">
          <view class="serial-number">序号: {{ item.serial }}</view>
          <view class="status" :class="item.status">{{ getStatusText(item.status) }}</view>
        </view>
        
        <view class="item-content">
          <view class="info-row">
            <text class="label">姓名:</text>
            <text class="value">{{ item.name }}</text>
          </view>
          
          <view class="info-row">
            <text class="label">问题描述:</text>
          </view>
          <view class="problem-desc">
            <text class="desc-text">{{ item.description }}</text>
          </view>
          
          <view class="info-row">
            <text class="label">问题反馈:</text>
          </view>
          <view class="problem-feedback">
            <text class="feedback-text">{{ item.feedback || '暂无反馈' }}</text>
          </view>
          
          <!-- 图片展示 -->
          <view class="feedback-images" v-if="item.images && item.images.length > 0">
            <text class="images-label">相关图片:</text>
            <view class="image-grid">
              <view class="image-item" v-for="(image, imgIndex) in item.images" :key="imgIndex" @click="previewImage(item.images, imgIndex)">
                <image :src="image" mode="aspectFill" class="feedback-image" />
              </view>
            </view>
          </view>
          
          <view class="item-footer">
            <text class="submit-time">提交时间: {{ item.submitTime }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-if="feedbackList.length === 0">
      <text class="empty-text">暂无反馈记录</text>
    </view>
  </view>
</template>

<script>
import { feedbackApi, utils } from '@/utils/api-simple.js'
import authService from '@/utils/auth.js'

export default {
  data() {
    return {
      feedbackList: [],
      loading: false,
      refreshing: false,
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 筛选参数
      status: 'all',
      name: '',
      type: ''
    }
  },
  onLoad() {
    this.setupRefreshListener()
    this.loadFeedbackList()
  },
  onShow() {
    console.log('反馈列表页面显示，刷新数据')
    this.setupRefreshListener()
    this.refreshData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  onReachBottom() {
    this.loadMore()
  },
  onUnload() {
    // 页面卸载时移除事件监听
    uni.$off('refreshFeedbackList', this.handleRefreshFeedbackList)
  },
  methods: {
    // 设置刷新事件监听器
    setupRefreshListener() {
      // 先移除之前的监听器，避免重复绑定
      uni.$off('refreshFeedbackList', this.handleRefreshFeedbackList)
      // 重新绑定监听器
      uni.$on('refreshFeedbackList', this.handleRefreshFeedbackList)
      console.log('已设置反馈列表刷新监听器')
    },
    
    // 处理刷新反馈列表事件
    handleRefreshFeedbackList() {
      console.log('收到刷新反馈列表事件，开始刷新数据')
      this.refreshData()
    },
    
    // 跳转到反馈表单页面
    goToFeedbackForm() {
      // 检查登录状态
      if (!authService.isLoggedIn()) {
        uni.redirectTo({
          url: '/pages/login/login?from=/pages/feedback/feedback'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/feedback-form/feedback-form'
      })
    },
    
    // 加载反馈列表
    async loadFeedbackList(refresh = false) {
      if (this.loading) return
      
      this.loading = true
      
      try {
        const params = {
          pageNum: refresh ? 1 : this.pageNum,
          pageSize: this.pageSize,
          status: this.status,
          name: this.name,
          type: this.type
        }
        
        const response = await feedbackApi.getFeedbackList(params)
        
        if (response.code === 200) {
          const list = response.rows || []
          
          // 处理数据
          const processedList = list.map(item => ({
            ...item,
            images: this.parseImages(item.images)
          }))
          
          if (refresh) {
            this.feedbackList = processedList
            this.pageNum = 1
          } else {
            this.feedbackList = [...this.feedbackList, ...processedList]
          }
          
          this.total = response.total || 0
        }
      } catch (error) {
        console.error('加载反馈列表失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
        this.refreshing = false
        uni.stopPullDownRefresh()
      }
    },
    
    // 刷新数据
    refreshData() {
      this.refreshing = true
      this.pageNum = 1
      this.loadFeedbackList(true)
    },
    
    // 加载更多
    loadMore() {
      if (this.feedbackList.length >= this.total) {
        return
      }
      this.pageNum++
      this.loadFeedbackList()
    },
    
    // 处理图片数据
    parseImages(images) {
      if (!images) return []
      if (Array.isArray(images)) {
        return images.map(url => utils.getImageUrl(url))
      }
      if (typeof images === 'string') {
        return utils.parseImageUrls(images).map(url => utils.getImageUrl(url))
      }
      return []
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'completed': '已完成'
      }
      return statusMap[status] || '未知'
    },
    
    // 筛选反馈
    filterFeedback(status) {
      this.status = status
      this.refreshData()
    },
    
    // 搜索反馈
    searchFeedback() {
      this.refreshData()
    },
    
    // 预览图片
    previewImage(images, current) {
      if (!images || images.length === 0) return
      
      uni.previewImage({
        urls: images,
        current: current,
        fail: (err) => {
          console.log('图片预览失败:', err)
          uni.showToast({
            title: '图片预览失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.feedback-header {
  margin-bottom: 20rpx;
}

.feedback-btn {
  width: 100%;
  background: linear-gradient(135deg, #07C160, #06AD56);
  color: white;
  border: none;
  border-radius: 20rpx;
  padding: 30rpx 28rpx;
  font-size: 34rpx;
  font-weight: bold;
  box-shadow: 0 10rpx 26rpx rgba(7, 193, 96, 0.28);
}

.feedback-btn:active {
  background: linear-gradient(135deg, #06AD56, #07C160);
}

.btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-emoji {
  font-size: 40rpx;
  margin-right: 14rpx;
}

.btn-text { color: white; }

.btn-sub {
  display: block;
  margin-top: 6rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.feedback-list {
  background-color: white;
  border-radius: 12rpx;
  overflow: hidden;
}

.list-header {
  background-color: #4CAF50;
  padding: 20rpx 30rpx;
}

.list-title {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
}

.feedback-item {
  border-bottom: 1rpx solid #f0f0f0;
  padding: 30rpx;
}

.feedback-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.serial-number {
  font-size: 28rpx;
  color: #666;
  font-weight: bold;
}

.status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: white;
}

.status.pending {
  background-color: #ff9800;
}

.status.processing {
  background-color: #2196F3;
}

.status.completed {
  background-color: #4CAF50;
}

.item-content {
  
}

.info-row {
  display: flex;
  margin-bottom: 15rpx;
}

.label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  min-width: 120rpx;
}

.value {
  font-size: 28rpx;
  color: #666;
  flex: 1;
}

.problem-desc, .problem-feedback {
  background-color: #f8f9fa;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.desc-text, .feedback-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.item-footer {
  text-align: right;
  margin-top: 15rpx;
}

.submit-time {
  font-size: 24rpx;
  color: #999;
}

.empty-state {
  text-align: center;
  padding: 100rpx 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 反馈图片展示样式 */
.feedback-images {
  margin-bottom: 20rpx;
}

.images-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.image-item {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.image-item:active {
  transform: scale(0.95);
}

.feedback-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}
</style>
